<template>
	<div class="ball">
		<a href="#!"><i class="material-icons first">create</i></a>
		<a href="#!"><i class="material-icons second">message</i></a>
		<a href="#!"><i class="material-icons third">alarm</i></a>
		<svg
			version="1.1"
			id="Ebene_1"
			xmlns="http://www.w3.org/2000/svg"
			xmlns:xlink="http://www.w3.org/1999/xlink"
			x="0px"
			y="0px"
			width="30px"
			height="30px"
			viewBox="0 0 30 30"
			enable-background="new 0 0 30 30"
			xml:space="preserve"
		>
			<polygon
				fill="#FFFFFF"
				points="30,14.5 15.5,14.5 15.5,0 14.5,0 14.5,14.5 0,14.5 0,15.5 14.5,15.5 14.5,30 15.5,30 15.5,15.5 
			30,15.5 "
			/>
		</svg>
	</div>
</template>

<style>
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-family: "Lato", sans-serif;
}

html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

body {
	background: url("https://images.unsplash.com/photo-1514747975201-4715db583da9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=68a7acc60c0f1408fd0fab08d2ca5071&auto=format&fit=crop&w=1950&q=80");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
body:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background: rgba(242, 57, 101, 0.2);
}

span {
	position: absolute;
	left: 5px;
	top: 5px;
	color: #fff;
}
span a {
	color: #f23965;
}

.container {
	width: 250px;
	height: 450px;
	background: #000;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	padding: 1em;
	overflow: hidden;
	background: url("https://images.unsplash.com/photo-1475139450941-3b6464b2dde3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b7fe9a24b76b2e9ea11ab09e1de72449&auto=format&fit=crop&w=1782&q=80");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: 1;
	padding-top: 60px;
	-webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
		0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
	box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
		0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.container.startup {
	animation: startup 1s cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation: startup 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.container.shake {
	animation: shake 1s cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-animation: shake 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.container:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background: -moz-linear-gradient(top, #595d9a 0%, rgba(89, 93, 154, 0) 100%);
	background: -webkit-linear-gradient(
		top,
		#595d9a 0%,
		rgba(89, 93, 154, 0) 100%
	);
	background: linear-gradient(to bottom, #595d9a 0%, rgba(89, 93, 154, 0) 100%);
}
.container i.back {
	position: absolute;
	margin: auto;
	top: 15px;
	right: 10px;
	font-size: 32px;
	line-height: 24px;
	color: #fff;
	z-index: 10;
	opacity: 0;
}
.container i.back:hover {
	cursor: pointer;
}
.container i.back.show {
	opacity: 1;
}

h1,
p {
	color: #fff;
	font-weight: 300;
}

.ball {
	width: 50px;
	height: 50px;
	background: #f23965;
	border-radius: 50%;
	position: absolute;
	right: 10px;
	bottom: 10px;
	overflow: hidden;
	transition: all 200ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/* mentioned by @Bloodysunset */
}
.ball:before {
	content: "";
	width: 50px;
	height: 50px;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 50%;
	background: #b90c35;
	opacity: 0;
	cursor: pointer;
}
.ball:hover {
	cursor: pointer;
}
.ball.active {
	width: 200px;
	height: 200px;
	bottom: -65px;
	right: -65px;
}
.ball.active:hover {
	cursor: default;
}
.ball.active:before {
	opacity: 1;
}
.ball.active svg {
	transform: rotate(45deg);
	cursor: pointer;
}
.ball.active .first {
	top: 20px;
	opacity: 1;
}
.ball.active .second {
	top: 40px;
	left: 40px;
	opacity: 1;
}
.ball.active .third {
	left: 20px;
	opacity: 1;
}
.ball svg {
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition: all 200ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
}
.ball i {
	color: #fff;
	width: 24px;
	height: 24px;
	position: absolute;
	margin: auto;
	transition: all 200ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
	opacity: 0;
}
.ball i.first {
	top: -40px;
	left: 0;
	right: 0;
	text-align: center;
}
.ball i.second {
	left: -25px;
	top: -25px;
}
.ball i.third {
	left: -40px;
	top: 0;
	bottom: 0;
}
.ball.expand {
	width: 200%;
	height: 150%;
	bottom: -25%;
	right: -50%;
}
.ball.expand:before {
	opacity: 0;
}
.ball.expand > * {
	display: none;
}

@keyframes startup {
	0% {
		transform: translate(0, 300px);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}
@-webkit-keyframes startup {
	0% {
		transform: translate(0, 300px);
		opacity: 0;
	}
	100% {
		transform: translate(0, 0);
		opacity: 1;
	}
}
@keyframes shake {
	0%,
	7% {
		transform: rotateZ(0);
	}
	15% {
		transform: rotateZ(-4deg);
	}
	20% {
		transform: rotateZ(3deg);
	}
	25% {
		transform: rotateZ(-3deg);
	}
	30% {
		transform: rotateZ(2deg);
	}
	35% {
		transform: rotateZ(-1deg);
	}
	40%,
	100% {
		transform: rotateZ(0);
	}
}
@-webkit-keyframes shake {
	0%,
	7% {
		transform: rotateZ(0);
	}
	15% {
		transform: rotateZ(-4deg);
	}
	20% {
		transform: rotateZ(3deg);
	}
	25% {
		transform: rotateZ(-3deg);
	}
	30% {
		transform: rotateZ(2deg);
	}
	35% {
		transform: rotateZ(-1deg);
	}
	40%,
	100% {
		transform: rotateZ(0);
	}
}
</style>

<script>
$(document).ready(function () {
	function showpanel() {
		$(".container").removeClass("startup");
		$(".ball")
			.addClass("active")
			.delay(2000)
			.queue(function (next) {
				$(this).removeClass("active");
				next();
			});
	}

	$(".ball").click(function () {
		$(this).toggleClass("active");
	});

	$("i").click(function () {
		$(".ball").addClass("expand");
		$(".back").addClass("show");
	});

	$(".back").click(function () {
		$(this).removeClass("show");
		$(".ball").removeClass("expand");
		$(".container")
			.addClass("shake")
			.delay(500)
			.queue(function (next) {
				$(this).removeClass("shake");
				next();
			});
	});

	setTimeout(showpanel, 1800);
});
</script>
